<template>
	<view class="container">
		<!-- <view style="width: 710rpx;margin-left: 20rpx;margin-top: 20rpx;margin-bottom: 40rpx;">
			<u-alert title="提示" type = "warning" :description = "description"></u-alert>
		</view> -->
		<u-collapse @change="change" @close="close" @open="open" :value="['bank']">
			<!-- <u-collapse-item :title="config['wx'] && config['wx'].title" name="wx">
				<view class="upload">
					<view class="imageView">
						<u-button @click="upload('wx', 'create')" v-if="!wxFormModel.id" text="上传"></u-button>
						<image :src="wxFormModel.paywayCodeUrl" v-if="wxFormModel.id" mode="scaleToFill"></image>
					</view>
					<view class="right" v-if="wxFormModel.id">
						<view class="defaultPayway">
							<u-switch activeColor='#d4a781' v-model="wxFormModel.default" @change="switchChange('wx')"></u-switch>
							<view style="font-size: 28rpx;margin-top: 20rpx;">
								<text>设为默认收款账户</text><br>
							</view>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;">
							<u-button @click="upload('wx', 'update')" text="更换"></u-button>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;" v-if="fromWay=='outMoney'">
							<u-button type="primary" plain @click='handleUse(wxFormModel)' text="使用"></u-button>
						</view>
					</view>
				</view>
			</u-collapse-item>
			<u-collapse-item :title="config['ali'] && config['ali'].title" name="ali">
				<view class="upload">
					<view class="imageView">
						<u-button @click="upload('ali', 'create')" v-if="!aliFormModel.id" text="上传"></u-button>
						<image :src="aliFormModel.paywayCodeUrl" v-if="aliFormModel.id" mode="scaleToFill"></image>
					</view>
					<view class="right" v-if="aliFormModel.id">
						<view class="defaultPayway">
							<u-switch activeColor='#d4a781' v-model="aliFormModel.default" @change="switchChange('ali')"></u-switch>
							<view style="font-size: 28rpx;margin-top: 20rpx;">
								<text>设为默认收款账户</text><br>
							</view>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;">
							<u-button @click="upload('ali', 'update')" text="更换"></u-button>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;" v-if="fromWay=='outMoney'">
							<u-button type="primary" plain @click='handleUse(aliFormModel)' text="使用"></u-button>
						</view>
					</view>
				</view>
			</u-collapse-item> -->
			<u-collapse-item :title="config['bank'] && config['bank'].title" name="bank">
				<view class="upload">
					<view class="imageView">
						<u-form :model="bankFormModel" ref="fromRules" labelPosition="top" label-width='200rpx' style='margin-top: 60rpx;'>
							<u-form-item label="真实姓名" prop="realname" :required='true' borderBottom>
								<u-input v-model="bankFormModel.realname" placeholder='请填写真实姓名' border="none" />
							</u-form-item>
							<u-form-item label="开户行名称" prop="accountName" :required='true' borderBottom>
								<u-input v-model="bankFormModel.accountName" placeholder='请填写开户行名称' border="none" />
							</u-form-item>
							<u-form-item label="开户行账号" prop="account" :required='true' borderBottom>
								<u-input v-model="bankFormModel.account" placeholder='请填写开户行账号' border="none"/>
							</u-form-item>
						</u-form>
					</view>
					<view class="right">
						<view class="defaultPayway" v-if="bankFormModel.id">
							<u-switch activeColor='#d4a781' v-model="bankFormModel.default" @change="switchChange('bank')"></u-switch>
							<view style="font-size: 28rpx;margin-top: 20rpx;">
								<text>设为默认收款账户</text><br>
							</view>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;">
							<u-button @click="saveBank('bank')" text="保存"></u-button>
						</view>
						<view style="width: 200rpx;margin-top: 40rpx;" v-if="bankFormModel.id">
							<u-button type="primary" plain @click='handleUse(bankFormModel)' text="使用" v-if="fromWay=='outMoney'"></u-button>
						</view>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		payway
	} from '@/api/payway.js'
	import { common } from '@/api/common.js'
	import {uploadFileToService} from '@/common/utils/uploadFile.js'
	export default {
		data() {
			return {
				itemList: [],
				aliFormModel: {paywayCodeUrl:'', default: false},
				wxFormModel: {paywayCodeUrl:'', default: false},
				bankFormModel: {paywayCodeUrl:'', default: false},
				description: '请上传完整、清晰的收款码！',
				fromWay: '',
				userInfo: {},
				checking: false,
				config: {}
			}
		},
		onLoad() {
			if(this.$Route.query.fromWay){
				this.fromWay = this.$Route.query.fromWay
			}
			this.loadData()
		},
		onShow() {
			this.getConfig()
		},
		methods: {
			getConfig(){
				common.operateActionPost('system/payway/getConfig/', {}).then(res => {
					if(res.data.code==10000){
						this.config = res.data.data
					}
				})
			},
			loadData(){
				// this.getPaywayInfo('wx')
				// this.getPaywayInfo('ali')
				this.getPaywayInfo('bank')
			},
			change(e){
				console.log('改变', e)
				
			},
			open(e){
				console.log('打开', e)
				
			},
			close(e){
				console.log('关闭', e)
			},
			upload(types, e){
				uploadFileToService().then(res=>{
					if(res.code==10000){
						if(types=='ali'){
							this.aliFormModel.paywayCodeUrl = res.data.url
							this.aliFormModel.types = types
						}else if(types=='wx'){
							this.wxFormModel.paywayCodeUrl = res.data.url
							this.wxFormModel.types = types
						}else if(types=='bank'){
							this.bankFormModel.paywayCodeUrl = res.data.url
							this.bankFormModel.types = types
						}
						if(e=='create'){
							this.createPayway(types)
						}else if(e=='update'){
							this.updatePaywayInfo(types)
						}
						
					}
				})
			},
			saveBank(types){
				if(!this.bankFormModel.realname){
					this.$show.showMessage('请填写真实姓名')
				}else if(!this.bankFormModel.accountName){
					this.$show.showMessage('请填写银行卡名称')
				}else if(!this.bankFormModel.account){
					this.$show.showMessage('请填写银行卡账号')
				}else{
					this.bankFormModel.types = types
					if(this.bankFormModel.id){
						this.updatePaywayInfo(types)
					}else{
						this.createPayway(types)
					}
				}
				
			},
			switchChange(types){
				this.updatePaywayInfo(types)
			},
			//创建
			createPayway(types){
				var formModel = {}
				if(types=='ali'){
					formModel = this.aliFormModel
				}else if(types=='wx'){
					formModel = this.wxFormModel
				}else if(types=='bank'){
					formModel = this.bankFormModel
				}
				payway.createPayway(formModel).then(res => {
					if(res.data.code == 10000){
						this.loadData()
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
			//更新地址信息
			updatePaywayInfo(types){
				var formModel = {}
				if(types=='ali'){
					formModel = this.aliFormModel
					formModel.paywayId = this.aliFormModel.id
				}else if(types=='wx'){
					formModel = this.wxFormModel
					formModel.paywayId = this.wxFormModel.id
				}else if(types=='bank'){
					formModel = this.bankFormModel
					formModel.paywayId = this.bankFormModel.id
				}
				payway.updatePayway(formModel).then(res => {
					if(res.data.code == 10000){
						this.loadData()
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
					}
				})
			},
			//选择收货地址
			handleUse(item) {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.selectPaywayInfoBack(encodeURIComponent(JSON.stringify(item)))
				uni.navigateBack();
			},
			//获取详情
			getPaywayInfo(types){
				payway.getPaywayInfo({
					types: types
				}).then(res=>{
					if(res.data.code==10000){
						if(types=='ali'){
							this.aliFormModel = res.data.data
						}else if(types=='wx'){
							this.wxFormModel = res.data.data
						}else if(types=='bank'){
							this.bankFormModel = res.data.data
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #FFFFFF;
		padding-bottom: 200rpx;
	}
	.upload{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		.imageView{
			width: 350rpx;
			height: 500rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image{
				width: 100%;
				height: 400rpx;
			}
		}
		.right{
			width: 350rpx;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
			.defaultPayway{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
		}
		
	}
</style>
